<template>
  <div>
    <el-dialog
      title="查看"
      v-bind="$attrs"
      v-on="$listeners"
      width="60%"
      @close="close"
    >
      <el-divider content-position="left"
        ><span style="font-size: 25px">订单详情</span></el-divider
      >
      <el-row :gutter="30" style="margin-top: 30px" class="dingdan">
        <el-col :span="8" style="border-right: 1px solid rgb(192, 196, 204)">
          <p>订单号：{{ dataForm.orderno }}</p>
          <!-- <h2 class="wait-pay">{{ handlerStatus(dataForm.orderstatus) }}</h2> -->
          <!-- <i class="el-icon-time">&nbsp;剩余20时48分</i> -->
          <!-- <div>
            <el-button type="danger" plain class="pay">付款</el-button>
          </div> -->
          <h2 class="wait-pay">
            {{
              priceJudgment == 0
                ? "无需付款"
                : handlerStatus(dataForm.orderstatus)
            }}
          </h2>

          <div>
            <el-button
              type="info"
              class="pay"
              @click="invoice"
              plain
              v-if="priceJudgment !== 0"
              >查看发票详情</el-button
            >
          </div>
        </el-col>
        <el-col :span="16">
          <div>
            <el-steps :active="activeName" align-center>
              <el-step title="提交报名" icon="el-icon-edit-outline"> </el-step>
              <el-step title="审核报名" icon="el-icon-folder-checked">
              </el-step>
              <el-step title="付款成功" icon="el-icon-bank-card"> </el-step>

              <el-step
                v-if="activeName > 3"
                title="提交退款"
                icon="el-icon-edit-outline"
              >
              </el-step>
              <el-step
                v-if="activeName > 3"
                title="审核退款"
                icon="el-icon-folder-checked"
              >
              </el-step>
              <el-step
                v-if="activeName > 3"
                title="退款成功"
                icon="el-icon-bank-card"
              >
              </el-step>
              <!-- <el-step
                title="开始学习"
                icon="el-icon-notebook-2"
              ></el-step> -->
            </el-steps>
          </div>
        </el-col>
        <el-col :span="24" style="margin-top: 40px">
          <el-card class="box-card">
            <div>
              <h3>收货人信息</h3>
              <div>
                收货人：<span>{{ dataForm.studentsEntity.consignee }}</span>
              </div>
              <div>
                地址：<span>{{
                  dataForm.studentsEntity.consigneeaddress
                }}</span>
              </div>
              <div>
                手机号码：<span>{{
                  dataForm.studentsEntity.consigneephone
                }}</span>
              </div>
            </div>
            <div>
              <h3>发票信息</h3>
              <div>
                发票内容：<span>{{ dataForm.invoicecontent }}</span>
              </div>
              <div>
                发票抬头：<span>{{
                  dataForm.studentsEntity.invoicetitle
                }}</span>
              </div>
              <div>
                公司税号：<span>{{
                  dataForm.studentsEntity.dutyparagraph
                }}</span>
              </div>
            </div>
            <div>
              <h3>付款信息</h3>
              <!-- v-if="priceJudgment !== 0" -->
              <div>
                付款方式：<span
                  v-if="
                    dataForm.orderstatus == '报名成功已完成付款' &&
                      priceJudgment !== 0
                  "
                  >在线支付</span
                >
                <span v-else-if="priceJudgment == 0">无需支付</span>
                <span v-else>等待支付</span>
              </div>
              <div>
                付款时间：<span
                  v-if="dataForm.orderstatus == '报名成功已完成付款'"
                  >{{ dataForm.lastmodifytime }}</span
                >
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <Invoice :visible.sync="invoiceVisible" ref="invoice" />
    </el-dialog>
  </div>
</template>
<script>
import request from "@/utils/request";
import Invoice from "./invoice.vue";
export default {
  name: "orderDetail",
  components: {
    Invoice
  },
  data() {
    return {
      activeName: 1,
      dataForm: {
        studentsEntity: {}
      },
      invoiceVisible: false,
      id: "",
      priceJudgment: ""
    };
  },
  computed: {
    handlerStatus() {
      return function(status) {
        let status_;
        switch (status) {
          case "提交报名等待审核":
            status_ = "等待审核";
            break;
          case "报名审核不通过":
            status_ = "审核不通过";
            break;
          case "报名成功已完成付款":
            status_ = "已完成付款";
            break;
          case "退款申请中":
            status_ = "退款申请中";
            break;
          case "退款成功":
            status_ = "退款成功";
            break;
          case "退款失败":
            status_ = "退款失败";
            break;
          default:
            status_ = "等待付款";
        }
        return status_;
      };
    }
  },
  methods: {
    async init(id, price) {
      this.id = id;
      this.priceJudgment = price;
      let { data } = await request({
        url: `/api/orders/Xy_ks_orders/${id}`,
        method: "get"
      });
      this.dataForm = data;

      switch (this.dataForm.orderstatus) {
        case "退款成功":
          this.activeName = 6;
          break;
        case "退款申请中":
          this.activeName = 4;
          break;
        case "报名成功已完成付款":
          this.activeName = 3;
          break;
        case "报名成功等待付款":
          this.activeName = 2;
          break;
        case "提交报名等待审核":
          this.activeName = 1;
          break;
        default:
          this.activeName = 1;
      }
    },
    invoice() {
      this.invoiceVisible = true;
      this.$refs.invoice.initData(this.id);
    },
    close() {
      this.dataForm = {
        studentsEntity: {}
      };
      this.activeName = 1;
    }
  }
};
</script>
<style scoped lang="scss" scoped>
::v-deep .el-card__body {
  display: flex;
  flex-direction: row;
  height: 250px;
  justify-content: space-around;
  > div {
    width: 33%;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    h3 {
      line-height: 50px;
    }
    div {
      margin: 5px 0;
      line-height: 24px;
      text-align: left;
      span {
        padding-left: 10px;
      }
    }
  }
  > div:nth-of-type(-n + 2) {
    border-right: 1px solid rgb(192, 196, 204);
    margin-right: 15px;
  }
}
::v-deep .el-dialog__body {
  padding-top: 0;
  height: 600px;
  overflow-y: auto;
}
.dingdan {
  .wait-pay {
    margin: 20px 0 5px 0;
    color: red;
  }
  .el-col {
    text-align: center;
    height: 20vh;
  }
  .el-col:nth-of-type(2) {
    > div {
      padding-top: 30px;
      height: 100%;
    }
  }
  .pay {
    width: 100px;
    margin: 10px 0;
  }
  ::v-deep .el-step__head.is-finish {
    color: red;
    border-color: red;
  }
  ::v-deep .el-step__title.is-finish,
  ::v-deep .el-step__description.is-finish {
    color: #000;
  }
  ::v-deep .el-step__title.is-process,
  ::v-deep .el-step__head.is-process {
    color: rgb(192, 196, 204);
  }
  // ::v-deep .el-step__head.is-finish{}
}
</style>
